<template>
  <div>
    <el-menu :default-active="this.$store.state.editableTabsValue" class="el-menu-vertical-demo" @open="handleOpen"
      @close="handleClose" :collapse="isCollapse" style="min-height: 750px; ">



      <router-link to="/home/index">
        <el-menu-item index="index" style="text-align: center;">
          <i class="el-icon-map-location"></i>
          <span slot="title">首页</span>
        </el-menu-item>
      </router-link>

      <el-submenu :index="menu.tabsName" v-for="menu in menuList">

        <template slot="title">
          <i :class="menu.icon"></i>
          <span>&nbsp; &nbsp;&nbsp;&nbsp;{{ menu.tabsName }}</span>
        </template>

        <router-link v-for="child in menu.children" :to="child.path">



          <el-menu-item :index="child.tabsName" @click="addTabs(child)">
            <template slot="title">
              <i :class="child.icon"></i>
              <span>{{ child.tabsName }}</span>
            </template>
          </el-menu-item>



        </router-link>
      </el-submenu>



      <div style="display: flex">
        <div style="flex: 1"></div>


        <el-button @click="Invert()" type="success" :icon="Ic" circle
          style="margin: 10px;text-align: center;"></el-button>



        <div style="flex: 1"></div>
      </div>


    </el-menu>


  </div>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
      // menuList:''
      isCollapse: true,
      Ic: "el-icon-caret-right"
    }
  },
  computed: {
    menuList: {
      get() {
        return this.$store.state.menuList
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    addTabs(child) {
      this.$store.commit('addTab', child)
    },
    Invert() {
      // console.log(this.$data.isCollapse)

      if (this.$data.isCollapse) {
        this.$data.Ic = "el-icon-caret-left"
      } else {
        this.$data.Ic = "el-icon-caret-right"
      }
      this.$data.isCollapse = !this.$data.isCollapse


    }
  }
};
</script>

<style scoped>
.el-menu-item {
  /* background-color:"#000000"; */
  padding-left: 70px;
}

/* .el-submenu {
  text-align: center;
} */

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;

}
</style>
